<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        body{
            /* 
                text-align：center，让哪些元素水平居中？
                答：文本   人妖盒子
            */
            text-align: center;
        }
        .item{
            display: inline-block;
            width: 234px;
            height: 260px;
            padding: 20px 10px;
            background-color: #fff;

            /* 不能写margin:0 auto; 只能写男盒子上 */
            /* margin: 0 auto; */

            /* 对于人妖盒子，除了可以并排显示之外，其它的特点和男盒子一样的 */
            margin: 20px;

        }
        .item:hover{
            box-shadow: 4px 7px 19px 10px rgba(153,153,153,0.43);
        }
        .item img{
            width: 160px;
            height: 160px;
        }
        .item .title{
            margin-top: 14px;
        }
        .item .desc{
            color: #999;
            margin-top: 8px;

            /* 省略号 */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .item .price{
            margin-top: 14px;
            font-size: 14px;
        }
        .item .new-price{
            color: #ff6700;
        }
        .item .old-price{
            color: #999;
            text-decoration: line-through;
            margin-left:5px;
        }
    </style>
</head>
<body>
    <a href="#" class="item">
        <img class="item-img" src="./images/xiaomi01.webp" alt="">
        <h3 class="title">小米平板5 Pro</h3>
        <p class="desc">
            全新12代英特尔处理器，CNC一体精雕工艺，2.5K 120Hz高清屏，可选MX550独立显卡
        </p>
        <div class="price">
            <span class="new-price">2399起</span>
            <span class="old-price">2499元</span>
        </div>
    </a>
</body>
</html>